<template>
	<view class="echart">
		<div ref="bar2"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const xData = this.chartData.map(item => item.name);
      const yData1 = this.chartData.map(item => item.value);
      let option = {
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          backgroundColor: "rgba(255, 255, 255, .92)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          // formatter: function (params) {
          //   var str = params[0].name + "：";
          //   params.filter(function (item) {
          //     if (item.componentSubType == "line") {
          //       str += item.value + '个';
          //     }
          //   });
          //   return str;
          // },
        },
        xAxis: {
          type: "category",
          data: xData,
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "#F3F3F3"
            }
          },
          //调整x轴的lable
          axisLabel: {
            textStyle: {
              fontSize: 14, // 让字体变小
              color: "#666666"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        },
        yAxis: {
          name: "个",
          nameTextStyle: {
            color: "#666666",
            fontSize: 14,
          },
          type: "value",
          // 控制网格线是否显示
          splitLine: {
            show: true,
            //  改变轴线颜色
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#F3F3F3"]
            }
          },
          //设置轴线的属性
          axisLine: {
            show: false,
            lineStyle: {
              color: "#F3F3F3"
            }
          },
          //调整Y轴的lable
          axisLabel: {
            textStyle: {
              fontSize: 14, // 让字体变小
              color: "#666666"
            }
          }
        },
        series: [
          {
            name:'申报项目',
            type: "line",
            data: yData1,
            symbol: "circle",
            symbolSize: 4,// 设置折点大小
            smooth: true,// 设置为光滑曲线
            itemStyle: {//折线拐点标志的样式
              color: "#04CDF4"
            },
            areaStyle: {
              normal: {
                type: "default",
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(0, 173, 254, 0.6)" },
                  { offset: 1, color: 'rgba(51, 201, 228, 0.2)' }
                ],false )
              }
            }
          }
        ]
      }
      this.$refs.bar2.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
